﻿<!--
 This file is part of GeoTransformer project (http://geotransformer.codeplex.com/).
 It is licensed under Microsoft Reciprocal License (Ms-RL).
-->
<!DOCTYPE html>
<html>
<head>
    <title>GeoTransformer Bing Maps</title>
    <meta http-equiv="Content-type"" content="text/html; charset=UTF-8" /> 
    <meta http-equiv="X-UA-Compatible"" content="IE=edge" /> 
    <script type="text/javascript">
    </script>
    <style type="text/css">
        body {
            background-color: white;
            font-family: 'Segoe UI', sans-serif;
        }

        h1 {
            margin: 5px;
            font-size: 150%;
            background: url("");
            height: 64px;
            background-repeat: no-repeat;
            padding-top: 15px;
            padding-left: 70px;
        }
        h2 {
            margin: 2px;
            font-size: 110%;
        }
        .ext {
            border: 1px solid #ccc;
            border-left: 3px solid #ccc;
            margin: 3px;
            padding: 5px;
        }
        a.button {
            float:right;
            padding: 2px 4px 2px 4px;
            min-width: 120px; 
            display: inline-block;
            text-align: center;
            text-decoration: none;
            color: black;
        }

        a.button span.hover {
            display: none;
        }
        a.button:hover span.normal {
            display: none;
        }
        a.button:hover span.hover {
            display: inline;
        }

        a.installed {
            background-color: #5bce2d;
            border: 1px solid #267c04;
        }
        a.installed:hover {
            background-color: #ce412d;
            border: 1px solid #7c2104;
        }
        a.available {
            background-color: #ddd;
            border: 1px solid #808080;
        }
        a.available:hover {
            background-color: #5bce2d;
            border: 1px solid #267c04;
        }
        a.pending-uninstall {
            background-color: #ce412d;
            border: 1px solid #7c2104;
        }
        a.pending-uninstall:hover {
            background-color: #5bce2d;
            border: 1px solid #267c04;
        }
        a.pending-install {
            background-color: #e5cb00;
            border: 1px solid #b7a300;
        }
    </style>
</head>
<body>
    <h1>GeoTransformer extensions</h1>

    <script type="text/html" id="template">
        <div class="ext">
            <a class="button installed" id="btn_u_[id]" style="[installed]" onclick="uninstall([id])" href="#"><span class="normal">Already installed</span><span class="hover">Uninstall</span></a>
            <a class="button pending-uninstall" id="btn_cu_[id]" style="display:none" onclick="cancelUninstall([id])" href="#"><span class="normal">Pending uninstall</span><span class="hover">Cancel</span></a>
            <a class="button available" id="btn_i_[id]" style="[available]" onclick="install([id])" href="#"><span class="normal">Available</span><span class="hover">Install</span></a>
            <a class="button pending-install" id="btn_pi_[id]" style="display:none" href="#"><span>Installing...</span></a>
            <h2>[title]</h2>
            <div class="desc">
                [description]
            </div>
        </div>
    </script>

    <div id="loading">Loading data. Please wait...</div>

    <script type="text/javascript">
        window.extensionElements = {};

        function uninstall(id) {
            if (!confirm('Do you really want to uninstall this extension? This will also remove all data created by this extension.'))
                return;

            if (!window.external.UninstallExtension(id))
                return;

            document.getElementById("btn_u_" + id).style.display = "none";
            document.getElementById("btn_cu_" + id).style.display = "";
        }

        function install(id) {
            if (!window.external.InstallExtension(id))
                return;

            document.getElementById("btn_i_" + id).style.display = "none";
            document.getElementById("btn_pi_" + id).style.display = "";
        }

        function installComplete(id) {
            document.getElementById("btn_pi_" + id).innerHTML = "<span>Installed, pending restart...</span>";
        }

        function cancelUninstall(id) {
            if (!window.external.CancelUninstallExtension(id))
                return;

            document.getElementById("btn_u_" + id).style.display = "";
            document.getElementById("btn_cu_" + id).style.display = "none";
        }

        function displayExtension(id, title, description, isInstalled) {
            var template = document.getElementById("template").innerHTML;
            template = template.replace(/\[installed\]/g, isInstalled ? "" : "display:none");
            template = template.replace(/\[available\]/g, isInstalled ? "display:none" : "");
            template = template.replace(/\[title\]/g, title);
            template = template.replace(/\[description\]/g, description);
            template = template.replace(/\[id\]/g, id);
            
            var e = document.createElement("div");
            e.innerHTML = template;
            document.body.appendChild(e);
        }
    </script>
</body>
</html>